<template>
  <div id="app">
    <div class="header" v-if="!$route.meta.isheader">
      <div class="left">
        <div style="margin-left: 8px">
          <div class="title" style="display: flex; justify-content: space-between; align-items: center;font-size: 21px; font-weight: bold">
            <span style="margin-right: 10px;">智能养老餐馆后台管理系统</span>
            <a-tooltip>
              <template slot="title">
                {{collapsed ? '展开菜单' : '收起菜单'}}
              </template>
              <a-icon style="position: relative; top: 1px" @click="toggleCollapsed" :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
            </a-tooltip>
          </div>
          <div style="font-size: 12px" v-if="false">
            <a-dropdown placement="bottomCenter">
              <a @click.prevent style="
                  color: #52c41a;
                  font-weight: bold;
                  display: inline-block;
                  height: 28px;
                ">
                <a-icon type="swap" style="
                    padding: 2px;
                    background-color: #52c41a;
                    color: white;
                    border-radius: 100%;
                  " />
                切换系统
              </a>
              <a-menu slot="overlay">
                <a-menu-item class="dropdown-menu" v-for="system in systemList" :key="system.key" style="padding: 5px 26px">
                  <img style="height: 24px" :src="'./img/logo/' + system.logo" />
                  <span style="margin-left: 4px">{{ system.title }}</span>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
            <a @click.prevent="closeWindow" href="#" style="color: #fa541c; font-weight: bold; margin-left: 12px">
              <a-icon type="poweroff" style="
                  padding: 2px;
                  background-color: #fa541c;
                  color: white;
                  border-radius: 100%;
                " />
              关闭系统
            </a>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="menu">
          <div class="menu-item" @click="backHome">
            <img src="./assets/home/back-home.png" class="icon-img back-home" alt="">
            <span>返回首页</span>
          </div>
          <!-- <div class="menu-item">
            <img src="./assets/home/backstage.png"
                 class="icon-img back-home"
                 alt="">
            <span>水库数据中心</span>
          </div> -->
          <!-- <div @click="toBackground"
               class="menu-item"
               v-if="togis === true">
            <img src="./assets/home/backstage.png"
                 class="icon-img back-home"
                 alt="">
            <span>进入后台</span>
          </div> -->
          <div class="menu-item has-sub-menu">
            <div class="sub-menu">
              <div @click="loginOut" class="sub-menu-item">
                <img src="./assets/home/logout.png" class="icon-img" alt="">
                <span>注销登录</span>
              </div>
              <div class="sub-menu-item" @click="toChangePassword">
                <img src="./assets/home/edit-password.png" class="icon-img" alt="">
                <span>修改密码</span>
              </div>
              <div class="sub-menu-item" @click="toUserInfoDetail">
                <img src="./assets/home/account-info.png" class="icon-img" alt="">
                <span>账户信息</span>
              </div>
            </div>
            <div @mouseover="isout = true" @mouseout="isout = false">
              <img src="./assets/home/user.png" class="icon-img" alt="">
              <span @mouseover="isout = true" @mouseout="isout = false" style="word-break: keep-all; display: inline-block">
                {{ name }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="slider" v-if="flag ? !flag : !$route.meta.fullscreenMode">
        <s-menu :data="menus" :collapsed="collapsed" />
      </div>
      <router-view class="main"></router-view>
    </div>
  </div>
</template>

<script>
import SMenu from "@/components/SMenu";
import Menu from './menu'

export default {
  name: "App",
  components: { SMenu },
  data() {
    return {
      menus: Menu,
      collapsed: false,
      todoListCount: 0,
      flag: true,
      name: "admin",
      togis: true, // 是否进入gis
      isout: false,
      isScreen: false,
      systemList: [
        {
          title: "智能养老餐馆后台管理系统",
          logo: "logo-nl.svg",
          icon: "nl_favicon.ico"
        }
      ]
    };
  },
  watch: {
  },
  mounted() {
    setTimeout(() => {
      this.flag = false;
    }, 500);
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    toScreen() {
      this.$router.push("/screen").catch(() => {});
    },
    toGIS() {
      this.togis = true;
      this.$router.push("/landesebene");
    },
    backHome() {
      window.location.href = "/#/home";
    },
    toBackground() {
      this.togis = false;
      this.$router.push("/gisHome");
    },
    toUserInfoDetail() {
      this.$router.push("/userInfoDetail").catch(() => {});
    },
    toChangePassword() {
      this.$router.push("/changePassword").catch(() => {});
    },
    loginOut() {
      this.menus = [];
      this.isout = false;
      sessionStorage.clear();
      window.location.replace("/#/login");
    }
  }
};
</script>

<style lang="scss">
.ant-input-number-disabled {
  input {
    background-color: #f7f7f7;
    color: #000000;
  }
}
.ant-input-disabled {
  background-color: #f7f7f7 !important;
  color: #000000 !important;
}
.ant-select-disabled {
  .ant-select-selection {
    background-color: #f7f7f7 !important;
    color: #000000 !important;
  }
}
html,
body,
#app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  display: inline;
  -moz-osx-font-smoothing: grayscale;
  font-family: "PingFang SC", Arial, "Hiragino Sans GB", "Microsoft Yahei",
    "Microsoft Sans Serif", "WenQuanYi Micro Hei", sans-serif;
}

#app {
  display: flex;
  flex-direction: column;
}

#app > .main-content {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}

#app > .main-content > .main {
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  padding: 24px;
  width: calc(100% - 256px);
}

#app > .main-content > .slider {
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #f0f0f0;
}

#app > .header {
  flex-shrink: 0;
  height: 64px;
  z-index: 1;
  //   box-shadow: 0px 2px 8px #f0f1f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: url("../public/img/header_bar_bg.svg") no-repeat,
    linear-gradient(251.35deg, #00a1ff 0%, #0081cc 100%);
  color: white;
}

#app > .header > .left {
  display: flex;
  align-items: center;
}

#app > .header > .right .account:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

#app > .header > .right {
  .menu {
    display: flex;
    justify-content: flex-end;
    .menu-item {
      padding: 0 12px;
      font-size: 14px;
      line-height: 18px;
      height: 40px;
      cursor: pointer;
      display: flex;
      align-items: center;
      overflow: hidden;
      transition: all 450ms;
      border-radius: 20px;
      word-break: keep-all;
      white-space: nowrap;
      .icon-img {
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
      .back-home {
        margin-top: -2px;
      }
      &.has-sub-menu {
        position: relative;
        padding: 0;
        box-shadow: none !important;
        text-align: right;
        width: 700px;
        max-width: fit-content;

        & > div:not(.sub-menu) {
          display: inline-flex;
          padding: 0 12px;
          transition: all 450ms;
          height: 40px;
          align-items: center;
          border-radius: 20px;
        }
      }

      &.has-sub-menu:hover {
        //max-width: 700px;
        transition: all 450ms;
        background-color: rgba(255, 255, 255, 0.2);
        position: relative;

        & > div:not(.sub-menu) {
          color: white;
          background: #3a36ff;
          box-shadow: 0px 4px 8px rgba(58, 54, 255, 0.5);
          border-radius: 20px;
        }

        .sub-menu {
          transition: all 450ms;
          visibility: visible;
          width: 322px;
        }
      }

      .sub-menu {
        width: 0;
        display: flex;
        visibility: hidden;
        overflow: hidden;
      }

      .sub-menu-item {
        height: 40px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        transition: background-color 450ms;
        border-radius: 20px;
      }

      .sub-menu-item:hover {
        background-color: rgba(255, 255, 255, 0.2);
      }

      i {
        margin-right: 9px;
      }

      &:hover {
        color: white;
        background: #3a36ff;
        box-shadow: 0px 4px 8px rgba(58, 54, 255, 0.5);
        border-radius: 20px;
      }
    }
  }
}
</style>
